<template>
	<view class="bg">
		<!-- 顶部导航部分 -->
		<view class="top">
				<view class="title_header">
					<view class="jiantou"></view>
					<text>卡券管理</text>
				</view>
		</view>
		
		<!-- 新增优惠卷 -->
		<view class="youhiujuan">
			<image src="/static/加号@2x.png"></image>
			<view>新增优惠劵</view>
		</view>
		
		<!-- 卡片内容 -->
		<view>
			<uni-card>
				<view class="rectangle">
					<text class="one">进行中</text>
					<text class="two">已结束</text>
				</view>
				
				<view class="content"  >
					<!-- 进行中的优惠卷 -->
					<view class="content-text1" >
						<!-- 左边部分 -->
						<view class="left">
							<view class="discount">满200元可用</view>
							<view class="money">
								<view class="fuhao">￥</view>
								<view class="number">20</view>
							</view>
						</view>
						
						<!-- 右边部分 -->
						<view class="right">
							<view class="discountname">优惠卷名称:新用户专享体验券</view>
							<view>有效期:2020.3.18-2020.4.18</view>
							<view class="limitone">每人限领一张</view>
							
							<!-- 已结束的标志 -->
							<view class="over" >
								<image src="/static/已结束.png"></image>
							</view>
							
						</view>
					</view>
					
					<view class="content-text1" >
						<!-- 左边部分 -->
						<view class="left">
							<view class="discount">满200元可用</view>
							<view class="money">
								<view class="fuhao">￥</view>
								<view class="number">20</view>
							</view>
						</view>
						
						<!-- 右边部分 -->
						<view class="right">
							<view class="discountname">优惠卷名称:新用户专享体验券</view>
							<view>有效期:2020.3.18-2020.4.18</view>
							<view class="limitone">每人限领一张</view>
							
							<!-- 已结束的标志 -->
							<view class="over2" >
								<image src="/static/已结束.png"></image>
							</view>
							
						</view>
					</view>
					
				</view>
				
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			this.CardManage();
		},
		onShow() {
			this.CardManage()
		},
		methods: {
			
		}
	}
</script>

<style>
	.bg{
		position: relative;
		background-color: #3785f6;
		width: 750rpx;
		height: 450rpx;
	}
/* 导航栏样式 */
	.top{
		width: 750rpx;
	}
	.title_header{
		display: flex;
		padding-top: 60rpx;
	}
	.title_header>text{
		font-size: 35rpx;
		color: white;
		margin-left: 270rpx;
	}
	.jiantou{
		border-bottom: 6rpx solid white;
		border-left: 6rpx solid white;
		width: 20rpx;
		height: 20rpx;
		margin-left: 20rpx;
		transform: rotate(45deg);
	}
	
	/* 新增优惠卷样式 */
	.youhiujuan{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 70rpx;
		margin-top: 50rpx;
		background-color: white;
		position: absolute;
		border-radius: 40rpx;
		width: 600rpx;
		height: 80rpx;
		color: #3785f6;
	}
	
	.youhiujuan image{
		width: 30rpx;
		height: 30rpx;
		padding-right: 15rpx;
	}
	
	uni-card {
		position: absolute;
		margin-top: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 进行中已结束样式 */
	.rectangle {
	  margin-top: 15rpx;
	  margin-left: 160rpx;
	  width: 300rpx;
	  height: 70rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border: 1rpx #FFFFFF;
	  border-radius: 30px;
	  background: linear-gradient(to right, #f2f2f2 50%, #2f81fa 10%);
	}
	.rectangle .one{
		color: #4d90fa;
		margin-right: 55rpx;
	}
	.rectangle .two{
		color: #ffffff;
	}
	
	/* 展示内容(优惠卷)样式 */
	.content {
		width: 610rpx;
		margin-top: 30rpx;
		
	}
	
	.content-text1{
		display: flex;
		margin-bottom: 40rpx;
		
	}
	.content-text1 .left{
		width: 190rpx;
		border: 1rpx #FFFFFF;
		border-radius: 7px 0 0 7px;
		background-image: linear-gradient(to bottom,#ffbb99,#ffbb99);
		color: white;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-bottom: 55rpx;
	}
	.left .discount{
		font-size: 29rpx;
		text-align: center;
	}
	.left .money{
		margin-left: 20rpx;
		margin-top: 40rpx;
		display: flex;
	}
	.money .number{
		font-size: 78rpx;
	}
	/* 右边样式 */
	.content-text1 .right{
		width: 410rpx;
		background-color: #f2f2f2;
		padding-top: 33rpx;
		padding-left: 17rpx;
		border: 1rpx #FFFFFF;
		border-radius: 0 7px 7px 0;
	}
	.right .discountname{
		font-weight: bold;
		color: #b8b8b8;
		padding-bottom: 8rpx;
	}
	.right .limitone{
		margin-top: 30rpx;
	}
	
	.over{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.over image{
		position: absolute;
		top: 260rpx;
		left: 500rpx;
		width: 120rpx;
		height: 70rpx;
	}
	
	.over2{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	.over2 image{
		position: absolute;
		top: 510rpx;
		left: 500rpx;
		width: 120rpx;
		height: 70rpx;
	}
	
	
	
	
	
	
	
	
	
	
	
</style>
